<template>
  <div class="ranking-list">
    <div class="chart-container" ref="chartContainer"></div>
    
    <el-table :data="rankList" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="username" label="用户" width="120" />
      <el-table-column prop="content" label="内容" show-overflow-tooltip />
      <el-table-column prop="likeCount" label="点赞数" width="100" />
      <el-table-column prop="commentCount" label="评论数" width="100" />
      <el-table-column prop="createTime" label="发布时间" width="180">
        <template slot-scope="scope">
          {{formatDateTime(scope.row.createTime)}}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pageNum"
      :page-size="pageSize"
      :total="total"
      layout="total, prev, pager, next"
      style="margin-top: 20px;">
    </el-pagination>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'RankingList',
  data() {
    return {
      rankList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      chart: null
    }
  },
  mounted() {
    this.initChart()
    this.fetchData()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    async fetchData() {
      try {
        const res = await this.$http.get('/api/posts/ranking', {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        })
        this.rankList = res.data.data.records
        this.total = res.data.data.total
        this.updateChart()
      } catch (error) {
        this.$message.error('获取排行榜数据失败')
      }
    },

    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer)
      window.addEventListener('resize', this.resizeChart)
    },

    updateChart() {
      const topPosts = this.rankList.slice(0, 5)
      const option = {
        title: {
          text: '内容热度排行榜',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: topPosts.map(post => post.content.substring(0, 15) + '...')
        },
        series: [
          {
            name: '点赞数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            data: topPosts.map(post => post.likeCount)
          },
          {
            name: '评论数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            data: topPosts.map(post => post.commentCount)
          }
        ]
      }
      this.chart.setOption(option)
    },

    resizeChart() {
      if (this.chart) {
        this.chart.resize()
      }
    },

    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },

    formatDateTime(time) {
      if (!time) return ''
      const date = new Date(time)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.ranking-list {
  padding: 20px;
}

.chart-container {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
</style>
